<template>
	<view class="zhilin-picker">
		<uni-popup ref="popup" type="bottom" @change="popupChange">
			<uni-nav-bar @clickLeft="clickLeft" @clickRight="tapOK" rightText="确定" left-icon="closeempty" :title="title"
				:border="null"></uni-nav-bar>
			<view class="main">
				<scroll-view class="scroll" scroll-y="true" :lower-threshold="1">
					<view class="scroll-view-item" v-for="(v,i) in list" :key="v.id" @tap="tapItem(v)"
						:class="selected.indexOf(v)>-1?'selected':null">
						<text>{{v.name}}</text>
						<icon v-show="selected.indexOf(v)>-1" type="success_no_circle" size="22" />
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'zhilin-select',

		props: {
			title: {
				type: String,
				default: '请选择'
			},
			value: {
				type: Boolean,
				required: true
			},
			data: {
				type: Array,
				required: true
			},
			multiple: {
				type: Boolean,
				default: true
			},
			showSearch: {
				type: Boolean,
				default: false
			},
			searchInput: Function,
			initSelected: Array
		},
		data() {
			return {
				list: [],
				selected: [],
				loading: false,
				searchVal: ''
			}
		},
		created() {
			this.dataInit()
		},
		watch: {
			value(n, o) {
				if (n) this.$refs.popup.open()
				else this.$refs.popup.close()
			},
			data(n, o) {
				this.dataInit()
				this.selected = []
			},
			searchVal() {
				this.inputSearch()
			},
			initSelected(n) {
				this.selected = n
			}
		},
		methods: {
			dataInit() {
				// if (typeof this.data[0] == 'string') {  
				// 	this.list = this.data.map((v, i) => ({
				// 		label: v,
				// 		value: v
				// 	}))
				// } else {
					this.list = this.data
				// }
			},
			clickLeft() {
				this.selected = []
				this.$emit('input', false)
				this.$emit('change', [])
			},
			tapItem(val) {
				if (this.multiple) {
					let idx = this.selected.indexOf(val)
					if (idx == -1) {
						this.selected.push(val)
					} else {
						this.selected.splice(idx, 1)
					}
				} else {
					this.selected = [val]
				}
				this.$emit('change', this.selected)
			},
			tapOK() {
				this.$emit('input', false)
				this.$emit('confirm', this.selected)
			},
			popupChange(e) {
				this.$emit('input', e.show)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zhilin-picker {
		font-size: 28rpx;
		display: flex;

		// /deep/ .uni-popup__wrapper-box {
		// 	background: #fff;
		// 	height: 1056rpx;
		// 	overflow: hidden;
		// 	display: flex;
		// 	flex-direction: column;

		// 	.uni-searchbar {
		// 		padding: 16rpx 48rpx;
		// 	}

		.main {
			height: calc(100% - 88rpx - 104rpx);
			flex: 1;
			position: relative;

			.scroll {
				max-height: 500rpx;
				background-color: #fff;

				.scroll-view-item {
					box-sizing: border-box;
					padding: 18rpx 44rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					min-height: 80rpx;

					&.selected {
						background: rgba($uni-color-primary, .1);
					}

					uni-text {
						width: 85%;
					}
				}
			}

			.loadingBox {
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(255, 255, 255, .7);
				z-index: 2;

				.uni-load-more {
					display: flex;
					justify-content: center;
					position: absolute;
					width: 100%;
					top: 35%;
					left: 50%;
					transform: translate(-50%);
				}
			}
		}

		// }
	}
</style>
